<template>
  <div class="wrap">
   
      <Top Top="我的关注"/>

    <div class="myfocus">
      <FocusDom 
      v-for="item in FocusList"
      :key="item.id" 
      :item="item"
       @clicked="CancelFocus(item.id)"
       />
     
    </div>
  </div>
</template>

<script>
// 引入顶部组件
import Top from "../../components/Top.vue";

// 引入关注文本框组价
import FocusDom from "@/components/FocusDom"

export default {
  components: {
    Top,
    FocusDom
   },
   data(){
      return {
         FocusList:[],
      }
   },
   mounted(){
     
     this.init();
   },
   methods:{

       CancelFocus(id){
        //  console.log(id);
        //  取消关注用户
        //  接口类型:【GET】
        //  需要验证:【Authorization 】
        //  接口地址: /user_unfollow/:id
        //  参数: :id
          this.$axios({
            method:'get',
            url:'/user_unfollow/'+id
          })
          .then((res)=>{
            // console.log(res);
            this.init();
          })
       },
       init(){
          //页面刷新获取关注列表
          // 接口类型:【GET】
          // 需要验证:【Authorization 】
          // 接口地址: /user_follows
      this.$axios({
        method:'get',
        url:'/user_follows'
      })
      .then((res)=>{
        // console.log(res);
        this.FocusList = res.data.data
      })
       }
   }
};
</script>

<style lang="less" scoped>

.myfocus {
    padding: 0 10/360*100vw;
 
}
</style>